<template>
	<view>
		<view class="list bg-white">
			<view class="item padding-lr" v-for="i in list" :key="i.id">
				<view class="main padding-tb">
					<view class="flex-row justify-between align-center">
						<view class="left">
							<view class="title u-line-1">
								{{i.reason}}
							</view>
							<view class="date u-line-1">
								{{i.created_at}}
							</view>
						</view>
						<view class="money u-line-1">
							{{i.direction>0?'+':'-'}}{{i.amount}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				list: []
			};
		},
		onLoad(opt) {
			this.type = opt.type
			this.getList();
		},
		methods: {
			getList() {
				this.$u.get('/finance/'+this.type+'/record').then(res => {
					this.list = res.data.result.record
				})
			}
		}
	}
</script>

<style lang="scss">
.item {
	.main {
		border-bottom: 1rpx solid rgb(230,230,230);
	}
	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		letter-spacing: 2rpx;
		max-width: 360rpx;
	}
	.date {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: rgba(153,153,153,1);
		max-width: 300rpx;
	}
	.money {
		font-size: 40rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 500;
		color: rgba(255,139,86,1);
		letter-spacing: 2rpx;
		max-width: 400rpx;
	}
}
</style>
